<template>
    <div id="app">
        <v-form-designer ref="vfDesigner1" :field-list-api="fieldListApi" :designer-config="designerConfig">
            <!-- 自定义按钮插槽演示 -->
            <template slot="default">
                <el-button type="text" @click="saveFormJson">保存</el-button>
            </template>
            <template slot="default">
                <el-button type="text" @click="comeback">返回列表</el-button>
            </template>
        </v-form-designer>

        <el-dialog title="是否修改表信息？" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="表单名称">
                    <el-input v-model="form.tableName" placeholder="请输入表单名称" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="表单描述">
                    <el-input v-model="form.description" placeholder="请输入表单描述" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="NoChangeTableName">取 消</el-button>
                <el-button type="primary" @click="Submit">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {UpdateFormDesigners,RefillFormDesigners} from '@/api/forms'

export default {
    name: 'FormUpdate',
    props: ["id"], //属性， id的值是路由传过来的
    data() {
        return {
            fieldListApi: {
                URL: 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/listField',
                labelKey: 'fieldLabel',
                nameKey: 'fieldName'
            },

            form: {
                tableName: '',
                description: ''
            },

            dialogFormVisible: false,

            // testBanned: [
            //   'sub-form',
            //   'alert',
            // ],

            designerConfig: {
                languageMenu: false,
                externalLink: false,
                formTemplates: false,
                eventCollapse: false,
                clearDesignerButton: false,
                previewFormButton: false,
                importJsonButton: false, // 不显示导入按钮
                exportJsonButton: false, // 不显示导出按钮
                //是否显示导出代码按钮
                exportCodeButton: false,

                //是否显示生成SFC按钮
                generateSFCButton: false,
                // presetCssCode: '.abc { font-size: 16px; }',
            }
        };
    },

    mounted() {
        //反填//反填表及表信息
        RefillFormDesigners({id: this.id}).then((res) => {
            this.$refs.vfDesigner1.setFormJson(res.formJson);
            //console.log(ref.data.formJson);
            this.form.tableName = res.formName;
            this.form.description = res.description;
        });
    },

    methods: {
        saveFormJson() {
            this.dialogFormVisible = true;
        },

        //保存修改设计及表信息
        Submit() {
            let formJson = this.$refs.vfDesigner1.getFormJson();

            let data = {
                formName:this.form.tableName,
                description:this.form.description, //表单名称
                formJson:formJson,
                id:this.id,
            };
            //将表单数据保存到数据库中
            UpdateFormDesigners(data).then((res) => {
                if (res.data > 0) {
                    this.$message.success('表单已保存！');
                    this.dialogFormVisible = false;
                    this.$router.push('/FormDesigner');
                } else {
                    this.$message.error('表单保存失败');
                    this.dialogFormVisible = false;
                }
            });
        },

        //保存修改设计 不修改表信息介绍
        NoChangeTableName() {
            this.dialogFormVisible = false;
        },

        comeback() {
            this.$router.push('/FormDesigner');
        }
    }
};
</script>




